<template>
  <div class="jsx-container" v-loading="{ visible: true, text: '加载中' }">
    <h3>我们利用渲染函数可以将上面的代码抽取成优雅的使用组件</h3>
    <jsx-child
      v-for="item in btns"
      :key="item.id"
      :status="item.status"
      @on-status="changeStatus"
    ></jsx-child>
  </div>
</template>

<script>
import JsxChild from "./JsxChild";
export default {
  components: {
    JsxChild
  },
  name: "JsxFunction",
  data() {
    return {
      status: 0,
      btns: [
        { id: "0", status: 0 },
        { id: "1", status: 1 },
        { id: "2", status: 2 },
        { id: "3", status: 3 }
      ]
    };
  },
  computed() {},
  methods: {
    changeStatus(val) {
      console.log("当前btn的状态是", val);
    }
  },
  mounted() {}
};
</script>

<style lang="stylus" scoped></style>
